import React, { useEffect, useState } from "react";
import {
  Table,
  Button,
  Modal,
  Form,
  Input,
  Select,
  Avatar,
  message,
} from "antd";
import {
  deleteUserById,
  getUserByPage,
  updateUserByForm,
} from "../../api/user";
import { useForm } from "antd/es/form/Form";

const { Option } = Select;

const Account = () => {
  const [userForm] = useForm();
  const [users, setUsers] = useState<any[]>([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentUser, setCurrentUser] = useState<any>(null);
  const [isEditMode, setIsEditMode] = useState(false);
  const [searchText, setSearchText] = useState("");

  const getData = async () => {
    const res: any = await getUserByPage({ page: 0, size: 10 });

    if (res.success) {
      setUsers(res.data.content);
    }
  };

  const showModal = (user: any, editMode: boolean) => {
    userForm.setFieldsValue(user);
    // setCurrentUser(user);
    setIsEditMode(editMode);
    setIsModalVisible(true);
  };

  // 保存用户
  const handleOk = async () => {
    const user = userForm.getFieldsValue();
    const res = await updateUserByForm(user);

    if (res.success) {
      message.success("更新成功");
      setIsModalVisible(false);
      getData();
    }
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const handleDelete = async (record: any) => {
    // setUsers(users.filter((user) => user.key !== key));

    console.log(record, "record");
    const res = await deleteUserById({ id: record.id });

    if (res.success) {
      getData();
      message.success('删除成功')
    }
  };

  const handleSearch = (value: string) => {
    setSearchText(value);
  };

  const columns = [
    {
      title: "用户名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "昵称",
      dataIndex: "nickName",
      key: "nickName",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
      render: (text: any) => (text == 1 ? "男" : "女"),
    },
    {
      title: "手机号",
      dataIndex: "phone",
      key: "phone",
    },
    {
      title: "身份证号",
      dataIndex: "idCard",
      key: "idCard",
    },
    {
      title: "操作",
      key: "action",
      render: (text: string, record: any) => (
        <span>
          <Button type="link" onClick={() => showModal(record, false)}>
            详情
          </Button>
          <Button type="link" onClick={() => showModal(record, true)}>
            编辑
          </Button>
          <Button type="link" danger onClick={() => handleDelete(record)}>
            删除
          </Button>
        </span>
      ),
    },
  ];

  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <Input.Search
        placeholder="搜索用户名"
        onSearch={handleSearch}
        style={{ width: 300, marginBottom: 20 }}
      />
      <Table columns={columns} dataSource={users} />
      <Modal
        title={isEditMode ? "编辑用户" : "用户详情"}
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText='确认'
        cancelText='取消'
      >
        <Form form={userForm} layout="vertical">
          <Form.Item name="id" noStyle></Form.Item>
          <Form.Item label="用户名" name="name">
            <Input readOnly={!isEditMode} />
          </Form.Item>
          <Form.Item label="昵称" name="nickName">
            <Input readOnly={!isEditMode} />
          </Form.Item>
          <Form.Item label="性别" name="sex">
            <Select disabled={!isEditMode}>
              <Option value={1}>男</Option>
              <Option value={0}>女</Option>
            </Select>
          </Form.Item>
          <Form.Item label="手机号" name="phone">
            <Input readOnly={!isEditMode} />
          </Form.Item>
          <Form.Item label="身份证号" name="idCard">
            <Input readOnly={!isEditMode} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Account;
